import { View, StyleSheet, Dimensions } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import { Image } from 'expo-image';

const { width: screenWidth } = Dimensions.get('window');

export default function NewsCarousel() {
  const carouselItems = [
    { id: 1, image: 'https://picsum.photos/800/400' },
    { id: 2, image: 'https://picsum.photos/800/400' },
    { id: 3, image: 'https://picsum.photos/800/400' },
  ];

  return (
    <View style={styles.container}>
      <Carousel
        loop
        width={screenWidth}
        height={200}
        autoPlay={true}
        data={carouselItems}
        scrollAnimationDuration={1000}
        renderItem={({ item }) => (
          <Image
            source={item.image}
            style={styles.carouselImage}
            contentFit="cover"
          />
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 200,
  },
  carouselImage: {
    width: '100%',
    height: 200,
  },
});
